<template>
	<div>
		<div style="padding: 10px 0;">
			<el-row :gutter="20">
			  <el-col :span="4">姓名：<el-input v-model="params.nickname" style="width: 120px;" placeholder="请输入内容" clearable></el-input></el-col>
			  <el-col :span="4">电话：<el-input v-model="params.phone" style="width: 120px;" placeholder="请输入内容" clearable></el-input></el-col>
			  <el-col :span="16" ><el-button type="primary">查询</el-button></el-col>
			</el-row>
		</div> 
		<div>
			 <el-table
			  :data="tableData"
			  style="width: 100%">
			  <!-- <el-table-column
				prop="name"
				label="姓名"
				align="center"
				>
			  </el-table-column> -->
              <el-table-column
                prop="icon_url"
                label="头像"
                align="center"
                >
                <template slot-scope="scope">
                		<img class="vegetableImg" :src="scope.row.icon_url" alt="">
                </template>
              </el-table-column>
			  <el-table-column
				prop="gender"
				label="性别"
				align="center"
				>
			  </el-table-column>
              <el-table-column
				prop="nickname"
				label="昵称"
				align="center"
				>
			  </el-table-column>
			  <el-table-column
				prop="telephone"
				label="电话"
				align="center"
				>
			  </el-table-column>
			  <!-- <el-table-column
				prop="date"
				label="注册日期"
				align="center"
				>
			  </el-table-column> -->
			  <el-table-column
				prop="total_expense"
				label="消费总额"
				align="center"
				>
			  </el-table-column>
			  <!-- <el-table-column
				prop="orders"
				label="订单总数"
				align="center"
				>
			  </el-table-column> -->
			  <el-table-column
				prop="common_address"
				label="常用地址"
				align="center"
				>
				</el-table-column>
				<el-table-column
				prop="desc"
				label="备注"
				align="center"
				>
			  </el-table-column>
                <el-table-column
              label="操作"
              align="center"
              >
              <template slot-scope="scope">
                <el-button type="text" @click="editCustomer(scope.row)" size="small">编辑</el-button>
              </template>
            </el-table-column>
			</el-table>
            <el-pagination
              background
              :current-page.sync="params.pageNo"
              :page-size.sync="params.pageSize"
              :page-sizes="[5,10, 20, 30, 40, 50, 100]"
              @current-change="getList"
              layout="sizes,prev, pager, next,total"
              :total="params.total">
            </el-pagination>
		</div>
        <el-dialog title="用户编辑" :visible.sync="dialogFormVisible" >
          <el-form  :label-width="'120px'">
            <el-form-item label="用户昵称" >
                <el-input v-model="form.nickname" style="width: 150px;"></el-input>
        	  </el-form-item>
        	<el-form-item label="用户头像" >
                <img class="vegetableImg" :src="form.icon_url" alt="">
        	  </el-form-item>
        	<el-form-item label="用户电话" >
        		<el-input v-model="form.telephone" style="width: 150px;"></el-input>
        	</el-form-item>
        	<el-form-item label="备注" >
        		<el-input v-model="form.desc" style="width: 150px;"></el-input>
        	</el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
        	<el-button @click="dialogFormVisible = false">取 消</el-button>
        	<el-button type="primary" @click="updateCostomer">确 定</el-button>
          </div>
        </el-dialog>
	</div>
</template>

<script>
    import ajax from '@/ajax';
	export default {
	   name: 'customer',
	   data: function(){
				return {
                    dialogFormVisible:false,
					params:{
						nickname:"",
						telephone:"",
						pageNo:1,
						pageSize:10,
						total:0,
					},
					tableData: [
					  ],
                    form:{
                        nickname:"",
                        telephone:"",
                        desc:"",
                    }
				}
		},
        mounted(){
            this.getList();
        },
        methods:{
            getList(){
                ajax.get("/tianhuiMarket/v1/userManager/query",{params:this.params}).then(res=>{
                    this.tableData = res.result.data;
                    this.params.total = res.result.count;
                })
            },
            editCustomer(row){
                this.form.name = row.name;
                this.form.nickname = row.nickname;
                this.form.telephone = row.telephone;
                this.form.icon_url = row.icon_url;
                this.form.desc = row.desc;
                this.form.id = row.id;
                this.dialogFormVisible = true;
            },
            updateCostomer(){
                ajax.put("/tianhuiMarket/v1/userManager/update",{
                    nickname:this.form.nickname,
                    telephone:this.form.telephone,
                    desc:this.form.desc,
                    id:this.form.id,
                }).then(res=>{
                   this.$message.success("操作成功！");
                   this.dialogFormVisible = false;
                   this.getList();
                })
            }
        }
	}
</script>

<style scoped="scoped">
    .vegetableImg{
    	width: 50px;
    	height: 50px;
        border-radius: 50%;
    }

</style>
